<template>
	<view>
		<u-navbar title="我的形象" titleStyle="color:#fff;" :placeholder="true" leftIconColor="#fff" :autoBack="true" bgColor="#1F1F1F">
			
		</u-navbar>
		<view class="create_nav">
			<navigator class="item"  hover-class="none">
				<image class="ico" src="../../myPages/static/img/ico_20.png" mode="widthFix"></image>
				<view class="info">
					<view class="name">
						剩余次数 {{userInfo.tk_vip_info.tk_person_count||0}} 次
					</view>
				</view>
			</navigator>
		</view>
		
		<view v-if="listData.length == 0" class="list_none" @click="isList = true">
			<image class="img" src="../static/img/ico_none.png" mode="widthFix"></image>
			<view class="text">暂未克隆形象</view>
		</view>
		<view v-else class="image_list">
			<view class="item" v-for="(item,index) in listData" :key="index">
				<image class="ph" :src="item.image_file" mode="aspectFill"></image>
				<view class="info">
					<view class="title">
						<view class="name">
							{{item.title}}
						</view>
						<u-icon @click="clickShowSheet(item)" name="more-dot-fill" color="#fff" size="34rpx" bold></u-icon>
					</view>
					<view class="tag">
						{{$u.timeFormat(item.add_time, 'yyyy-mm-dd hh:MM')}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer_none"></view>
		<view class="footer_yellow_btn" @click="addImage()"  hover-class="none">
			一键克隆数字人
		</view>
		
		<!-- 操作菜单 -->
		<u-popup :show="showPower" @close="closePower" @open="openPower" mode="bottom" bgColor="#2C2C2C" round="30rpx">
			<view class="power_sheet">
				<view class="item" v-for="(item,index) in listSheet" :key="index" @click="clickSheetPower(item.name)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		
		<!-- 重命名 -->
		<u-popup :show="showEntries" mode="center" bgColor="#484848" round="10rpx" :safeAreaInsetBottom="false" @close="closeEntries" @open="openEntries">
			<view class="entries_box">
				<view class="title">
					声音名称
				</view>
				<view class="entries_input">
					<u--input
						placeholder="请输入声音名称"
						border="none"
						v-model="newName"
						customStyle="background:#2C2C2C;padding:12rpx 20rpx;"
						placeholderStyle="color:#979797;"
						fontSize="26rpx"
						color="#fff"
					></u--input>
				</view>
				<view class="entries_box_btn">
					<view class="item" @click="showEntries = false">
						取消
					</view>
					<view class="item yellow" @click="reName()">
						提交
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isList: false,
				userId:'',
				userInfo: {},
				listData: [],
				showPower: false,
				listSheet: [
					{
						name: '重命名',
					},
					{
						name: '删除'
					},
					{
						name: '取消'
					}
				],
				itemData: {},
				newName: '',
				showEntries: false
				
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.updateUserdata()
			this.getSourceList()
		},
		onShow() {
			this.userId = uni.getStorageSync('userId');
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.updateUserdata()
			this.getSourceList()
		},
		methods: {
			updateUserdata(){
				uni.$u.http.post('/api/update_userdata/' + this.userId + '?from=miniprogram', {
					first_name: this.userInfo.first_name
				}).then(res => {
					console.log('更新用户资料----', res.data)
					uni.setStorageSync("userInfo", JSON.stringify(res.data.data));
					//uni.setStorageSync("token", resa.data.data.token);
					//uni.setStorageSync("isLogin", true);
					//uni.setStorageSync("userId", resa.data.data.user_id);
					this.userInfo = res.data.data
					// uni.reLaunch({
					// 	url: "/myPages/create/create"
					// })
				}).catch(err => {
					console.log(err)
				})
			},
			clickSheetPower(name){
				const that = this
				if(name == '重命名'){
					this.showPower = false
					this.showEntries = true
					this.newName = this.itemData.title
				}
				else if(name == '删除'){
					uni.showModal({
						title: '提示',
						content: '确定删除吗？删除后无法恢复。',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.postSourceUpdate({
									id: that.itemData.id,
									is_del: 1
								})
							} 
							else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
				}
				else{
					this.showPower = false
				}
			},
			clickShowSheet(item){
				this.itemData = item
				this.showPower = true
			},
			addImage(){
				//次数不够	
				if(this.userInfo.tk_vip_info.tk_person_count < 1){
					uni.showToast({
						title: '权益次数不足',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				uni.navigateTo({
					url: '/imagePages/addImage/addImage'
				})
			},
			reName(){
				if(!this.newName){
					uni.showToast({
						title: '请输入形象名称',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.postSourceUpdate({
					id: this.itemData.id,
					title: this.newName
				})
			},
			postSourceUpdate(data){
				uni.$u.http.post('/api/speed_source_update/'+this.userId +'?from=miniprogram', data).then(res => {
					console.log('更新形象-----',res.data.data)
					this.getSourceList()
					this.showPower = false
					this.showEntries = false
				}).catch(err => {
					console.log(err)
				})
			},
			getSourceList(){
				uni.$u.http.get('/api/speed_source_list/'+this.userId +'?from=miniprogram&type=0&count=999').then(res => {
					console.log('我的形象-----',res.data.data)
					this.listData = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			openPower() {
				// console.log('open');
			},
			closePower() {
				this.showPower = false
				// console.log('close');
			},
			openEntries() {
				// console.log('open');
			},
			closeEntries() {
				this.showEntries = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
.entries_box{
	width: 670rpx;
	.entries_input{
		padding:0 40rpx 40rpx;
	}
	.entries_box_btn{
		border-top:1rpx solid #585858;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 30rpx;
		.item{
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: 26rpx;
			font-weight: 600;
			line-height: 40rpx;
			color: #959595;
			&.yellow{
				color: #FFB200;
			}
		}
	}
	.title{
		text-align: center;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		color: #FFFFFF;
		padding:30rpx 0;
	}
}
.power_sheet{
	padding:20rpx;
	width: 100%;
	box-sizing: border-box;
	.item{
		color:#fff;
		font-size: 26rpx;
		font-weight: 600;
		line-height: 40rpx;
		text-align: center;
		padding:30rpx;
	}
}

.create_nav{
	margin: 0 40rpx;
	height: 100rpx;
	border-radius: 10rpx;
	background: #2C2C2C;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		padding:0rpx 40rpx;
		.ico{
			flex-shrink: 0;
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}
		.info{
			width: 100%;
			.name{
				font-size: 30rpx;
				font-weight: 500;
				line-height: 36rpx;
				text-align: justify;
				color: #999999;
			}
			.text{
				font-size: 18rpx;
				font-weight: normal;
				line-height: 26rpx;
				text-align: justify;
				color: #999999;
			}
		}
	}
}
.image_list{
	display: flex;
	flex-wrap: wrap;
	padding:15rpx 25rpx;
	.item{
		padding:0rpx 15rpx;
		width: 204rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name{
				font-size: 22rpx;
				font-weight: normal;
				line-height: 32rpx;
				color: #FFFFFF;
			}
		}
		.tag{
			font-size: 18rpx;
			font-weight: normal;
			line-height: 26rpx;
			color: #999999;
			margin-top: 6rpx;
		}
		.info{
			position: absolute;
			left:0;
			bottom: 0;
			right: 0;
			background: #393939;
			padding: 12rpx 15rpx;
			margin: 0rpx 15rpx;
			border-radius: 10rpx;
			z-index: 2;
		}
		.ph{
			width: 100%;
			height: 440rpx;
			background: #222;
			border-radius: 10rpx;
		}
	}
}
.footer_none{
	width: 100%;
	height: 160rpx;
}
.footer_yellow_btn{
	position: fixed;
	left:40rpx;
	right: 0;
	bottom: 60rpx;
	width: 670rpx;
	height: 70rpx;
	border-radius: 35rpx;
	background: #F9BE01;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	font-weight: normal;
	color: #292D32;
	z-index: 999;
}
.list_none{
	text-align: center;
	padding:400rpx 0 0;
	.img{
		display: block;
		width: 470rpx;
		margin: 0 auto;
	}
	.text{
		display: block;
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: justify;
		color: #A6A6A6;
		text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2613);
		text-align: center;
		padding:40rpx 0 0;
	}
}
</style>
